<template>
	<div class="form">
		<h1>form</h1>
		<h2>密码框</h2>
		<el-container>
			<el-main>
				<el-row :gutter="20">
					<el-col :span="12">
						<el-input v-model="user" clearable placeholder="yonghuming"></el-input>
						<el-input v-model="pass" placeholder="密码" show-password></el-input>
						<el-input suffix-icon="el-icon-phone" placeholder="带图标的"></el-input>
						<el-input placeholder="123">
							<template slot="prepend">Http://</template>
						</el-input>
						<el-button>立即注册</el-button>
					</el-col>
					<el-col :span="12">
						<el-input type="textarea" :rows="2" autosize placeholder="请输入内容" v-model="textarea">
						</el-input>
						<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea2">
						</el-input>
					</el-col>
				</el-row>
			</el-main>
		</el-container>
		<h2>indeterminate 状态</h2>
		<p>{{ cities }}</p>
		<p>{{ checkCities }}</p>
		<p>{{ checkAll }}</p>
		<p>{{ isInderminate }}</p>

		<el-checkbox :indeterminate="isInderminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
		<br><br>
		<el-checkbox-group v-model="checkCities" @change="handleCheckedCitiesChange">
			<el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
		</el-checkbox-group>

		<h2>checkbox Group</h2>
		<p>{{ arr }}</p>
		<el-checkbox-group v-model="arr">
			<el-checkbox label="复选框 1"></el-checkbox>
			<el-checkbox label="复选框 2"></el-checkbox>
			<el-checkbox label="复选框 3"></el-checkbox>
			<el-checkbox label="复选框 4" disabled></el-checkbox>
			<el-checkbox label="复选框 5"></el-checkbox>
		</el-checkbox-group>
		<h2>checkbox</h2>
		<p>{{checkbox}}</p>
		<el-checkbox v-model="checked">同意选中协议</el-checkbox>
		<h2>radio</h2>
		<p>{{radio4}}</p>
		<el-radio-group v-model="radio4" disabled size="mini" @change="r4">
			<el-radio-button label="上海"></el-radio-button>
			<el-radio-button label="北京"></el-radio-button>
			<el-radio-button label="广州"></el-radio-button>
			<el-radio-button label="深圳"></el-radio-button>
		</el-radio-group>
	</div>
</template>

<script>
	const cityOptions = ['上海', '北京', '广州', '深圳',];
	export default {
		name: "Form",
		data() {
			return {
				radio4: "上海",
				checkbox: true,
				arr: ["复选框 1", "复选框 4"],
				cities: cityOptions,
				checkCities: ['上海', '北京'],
				checkAll: false,
				isInderminate: true,
				user: '',
				pass: '',
				textarea: '',
				textarea2: '',
			}
		},
		methods: {
			r4(e) {
				console.log("选中的结果是：" + e);
				console.log("最新结果：" + this.radio4);
			},
			handleCheckedCitiesChange(value) {
				let checkedCount = value.length;
				this.checkAll = checkedCount === this.cities.length;
				this.isInderminate = checkedCount > 0 && checkedCount < this.cities.length;
			},
			handleCheckAllChange(val) {
				this.checkCities = val ? cityOptions : [];
				this.isInderminate = false;
			}
		}
	};
</script>

<style scoped>
</style>
